<template>
    <div class="eco-knowledge">
      <h2>环保知识小百科</h2>
      <!-- 垃圾分类知识展示，实际可根据 JSON 数据循环渲染 -->
      <div class="knowledge-item">
        <h3>垃圾分类小知识</h3>
        <p>{{垃圾分类知识内容}}</p>
      </div>
      <!-- 空气污染知识展示，实际可根据 JSON 数据循环渲染 -->
      <div class="knowledge-item">
        <h3>空气污染小知识</h3>
        <p>{{空气污染知识内容}}</p>
      </div>
    </div>
  </template>
  
  <script>
  // 模拟本地 JSON 数据（也可单独创建 JSON 文件，通过 import 引入）
  const ecoData = {
    垃圾分类知识: "垃圾分类一般分为可回收物、有害垃圾、厨余垃圾、其他垃圾……",
    空气污染知识: "空气污染主要来源于工业排放、汽车尾气等，PM2.5 是常见污染物……"
  };
  export default {
    data() {
      return {
        垃圾分类知识内容: ecoData.垃圾分类知识,
        空气污染知识内容: ecoData.空气污染知识
      };
    }
  };
  </script>
  
  <style scoped>
  .eco-knowledge {
    padding: 20px;
  }
  .knowledge-item {
    margin-bottom: 30px;
  }
  </style>